<template>
    <div id='bug-sdk'>
        <v-header title="SDK" :saveShow="false" :showDownloadBtn="false"></v-header>
        <div style="height: calc(100% - 56px);padding: 10px 0 10px 10px">
            <el-row>
                <el-col :span="6">
                    <div style="margin-right: 10px;background: white">
                        <!--左边导航栏-->
                        <el-card>
                            <div slot="header" class="clearfix">
                                <span style="font-weight: bold">SDK</span>
                            </div>
                            <div class="lists-info" :class="{'active':btn===1&&true}" @click="btn=1">
                                <i class="iconfont icon-shujujicheng"></i>
                                快速集成
                            </div>
                            <div class="lists-info" :class="{'active':btn===2&&true}" @click="btn=2">
                                <i class="iconfont icon--gengxinrizhi-P"></i>
                                更新日志
                            </div>
                        </el-card>
                    </div>
                </el-col>
                <el-col :span="18">
                    <div style="margin-left: 10px;background:white;height: 100%">
                        <!--右边显示内容栏-->
                        <el-card>
                            <div slot="header" class="clearfix">
                                <span v-show="btn===1">快速集成</span>
                                <span v-show="btn===2">更新日志</span>
                            </div>
                            <!--快速集成-->
                            <div v-show="btn===1" style="padding: 30px 15px 10px 15px">
                                <!--标签页头部-->
                                <div class="tabs-head">
                                    <span class="cursor" :class="{'tab-item':tabsItem===1&&true}" @click="tabsItem=1">Android Studio 集成</span>
                                    <span class="cursor" :class="{'tab-item':tabsItem===2&&true}" @click="tabsItem=2">Eclipse 集成</span>
                                </div>
                                <!--显示相应的下载内容-->
                                <div class="download-box" style="text-align: center;padding: 20px 0 30px 0">
                                    <span @click="downloadFile">
                                        <i class="iconfont icon-download"></i>
                                        下载示例应用
                                    </span>
                                    <span @click="downloadFile" v-if="tabsItem===2" style="margin-left: 30px">
                                        <i class="iconfont icon-download"></i>
                                        下载 SDK 3.0.0
                                    </span>
                                </div>
                                <!--标签为1时的内容-->
                                <div v-show="tabsItem===1">
                                    <p style="font-size: 23px;letter-spacing: 3px;">注意:</p>
                                    <ul class="tips" style="padding: 10px 0 0 40px">
                                        <li>请勿与其他带有崩溃分析的 SDK 同时使用，否则将有可能影响崩溃捕捉功能的正常使用，具体参考<a href="https://docs.bugtags.com/zh/faq/post-issue-not-found.html" target="_blank">这里</a>；</li>
                                        <li>关于<code>小米手机悬浮小球</code>等问题，请查看：<a href="https://docs.bugtags.com/zh/faq/android/index.html" target="_blank">Android 常见问题</a>；</li>
                                        <li>React-Native 集成，请参考：<a href="https://github.com/bugtags/Bugtags-React-Native" target="_blank">Bugtags-React-Native</a></li>
                                    </ul>
                                    <p class="app-title">第一步：配置依赖</p>
                                    <ul>
                                        <li><p>在项目的 build.gradle（项目根目录的 build.gradle 文件）设置 <code>buildscript
                                            dependencies</code> ：</p>
                                            <pre><code>  buildscript {
      ...

      repositories {
              mavenCentral()//如果 jcenter 很慢，尝试添加 mavenCentral 并调整到首行
              jcenter()
      }

      dependencies {
          ...
          //**重要**
          classpath 'com.bugtags.library:bugtags-gradle:latest.integration'
      }
  }

  allprojects {
      repositories {
          mavenCentral()//如果 jcenter 很慢，尝试添加 mavenCentral 并调整到首行
          jcenter()
      }
  }
</code></pre>
                                        </li>
                                        <li><p>在你的 Android app(com.android.application) 模块的 build.gradle 应用插件和添加依赖：</p>
                                            <pre><code>  android {

      useLibrary 'org.apache.http.legacy'
      compileSdkVersion ...

      defaultConfig {
          ndk {
              // 设置支持的 SO 库构架
              abiFilters 'armeabi'// 'armeabi-v7a', 'arm64-v8a', 'x86', 'x86_64', 'mips', 'mips64'
          }
      }
  }

  //应用 Bugtags 插件
  apply plugin: 'com.bugtags.library.plugin'

  //Bugtags 插件配置
  bugtags {
  //自动上传符号表功能配置，如果需要根据 build varint 配置，请参考帮助中心-&gt;符号表-&gt;Android 符号表-&gt;配置自动上传符号表
      appKey "5fddfdc424a4e989f11e2e3439fba26c"  //这里是你的 appKey
      appSecret "APP_SECRET"    //这里是你的 appSecret，管理员在设置页可以查看
      mappingUploadEnabled true

      //网络跟踪功能配置(企业版)
      //trackingNetworkEnabled true
  }

  dependencies {
      ...
      compile 'com.bugtags.library:bugtags-lib:latest.integration'
      //线上使用，如果不需要使用手动提交 issue，可以选择 metrics 包
      //compile 'com.bugtags.metrics:bugtags-lib:latest.integration'
  }
</code></pre>
                                            <p> 关于 Metrics 版本，请参考<a
                                                href="https://docs.bugtags.com/zh/faq/android/metrics-version.html"
                                                target="_blank">文档</a>。</p>
                                            <p> 如下图：</p>
                                            <p>
                                                <img class="contain-img" src="https://upload.bugtags.com/sdks/1606/07/gradle-config-57568242e2c36.png?bucket=bt-upload" alt="Bugtags-Android-Studio">
                                            </p>
                                        </li>
                                    </ul>
                                    <ul class="tips" style="padding: 5px 0 0 40px">
                                        <li>请勿与其他带有崩溃分析的 SDK 同时使用，否则将有可能影响崩溃捕捉功能的正常使用，具体参考<a href="https://docs.bugtags.com/zh/faq/post-issue-not-found.html" target="_blank">这里</a>；</li>
                                        <li>关于<code>小米手机悬浮小球</code>等问题，请查看：<a href="https://docs.bugtags.com/zh/faq/android/index.html" target="_blank">Android 常见问题</a>；</li>
                                        <li>React-Native 集成，请参考：<a href="https://github.com/bugtags/Bugtags-React-Native" target="_blank">Bugtags-React-Native</a></li>
                                    </ul>
                                </div>
                                <!--标签为2时的内容-->
                                <div v-show="tabsItem===2" style="height: 100px;background: cyan">
                                </div>
                            </div>
                            <!--更新日志-->
                            <div v-show="btn===2" style="padding: 30px 15px 10px 15px">
                                我是是非得失大家好
                            </div>
                        </el-card>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script type='text/ecmascript-6'>
    import {VHeader} from './../../components'
    import Msg from '../../assets/js/msg'
    export default {
        components: {
            VHeader
        },
        data () {
            return {
                btn: 1,
                tabsItem: 1
            }
        },
        methods: {
            downloadFile () {
                Msg.alert('正在开发中请等待！')
            }
        },
        mounted () {
        },
        created () {
        }
    }
</script>
<style lang='stylus' rel='stylesheet/stylus' type="text/stylus">
    #bug-sdk
        height 100%
        .el-card__header
            padding 10px 20px
        .el-card__body
            padding 0
        .el-row,.el-col-18,.el-card
            height 100%
        .lists-info
            padding 8px 20px
            i
                vertical-align middle
                font-size 20px
                margin-right 5px
        .el-card__body
            height calc(100% - 42px)
            overflow-y auto
        .lists-info:hover
            background #f7f7f7
        .active
            background #F4F4F4 !important
        .tabs-head
            border-bottom 1px solid #ddd
            text-align center
            line-height 48px
            transition all 0.3s linear
            span
                display inline-block
                padding 0 15px
                position relative
                font-size 13px
                color #7a7a7a
            span.tab-item
                color #000000
        .tabs-head span:after
            content ""
            height 1px
            position absolute
            width 100%
            left 0
            bottom -1px
            transition all 0.3s linear
            background #2196f3
            transform scale(0)
        .tabs-head span.tab-item:after
            transform scale(1)
        .download-box
            span
                display inline-block
                height 50px
                width 200px
                background-color #fff
                text-align center
                font-size 15px
                border 1px solid #e3e3e3
                box-shadow none !important
                border-radius 6px
                line-height 48px
                color #818181
                cursor pointer
            .iconfont
                margin-right 5px
        .tips
            color #5e5e5e
            a
                color #2196f3
            code
                padding 2px 4px
                color #c7254e
                background-color #f9f2f4
                border-radius 2px
            a:hover
                color #0a6ebd
            li
                list-style-type disc
        .app-title
            margin 20px 0 10px 0
            font-size 27px
</style>
